<template>
  <div class="container">
    <h1 class="text-center">Projects</h1>
    <hr/>
    <ProjectDes class="text-center"/>
    <br/>
    <div v-if="projects.length!==0">
      <div class="grid-3_xs-1_sm-2_md-2">
        <div
          v-for="(project, index) in projects"
          :key="index"
          class="col center"
        >
<!--          /${project.id}-->
          <router-link :to="`/project/${project.id}`">
            <vs-card
              type="5"
            >
              <template #title>
                <h3>{{ project.projectName }}</h3>
              </template>
              <template #text>
                <p>
                  {{ project.projectDesc }}
                </p>
              </template>
              <template #img>
                <img :src="project.imgUrl"/>
              </template>
              <template #interactions>
                <vs-tooltip right>
                  <vs-button size="large" dark icon :href="project.github" blank>
                    <i class="bx bxs-purchase-tag"></i>
                  </vs-button>
                  <template #tooltip>
                    tag
                  </template>
                </vs-tooltip>
              </template>
            </vs-card>
          </router-link>
        </div>
      </div>
      <div class="center con-pagination">
        <vs-pagination v-model="curPage" :length="total" not-margin square/>
      </div>
    </div>
    <Nothing v-else/>
  </div>
</template>

<script>
import Nothing from '@/components/Nothing.vue'
import axios from 'axios'

let ProjectDes = null
try {
  ProjectDes = require('@/../posts/data/project-des.md')
} catch (e) {
  ProjectDes = require('@/defaults/project-des.md')
}

export default {
  name: 'ViewProjects',
  components: {
    ProjectDes: ProjectDes.vue.component,
    Nothing
  },
  data: function () {
    return {
      curPage: 1,
      total: 12,
      projects: []
    }
  },
  mounted: function () {
    this.changeTitle('Projects')
    this.getProjects()
  },
  watch: {
    curPage: function (v1, v2) {
      // console.log(v1)
      this.getProjects()
    }
  },
  methods: {
    test: function () {
      axios({
        url: '/api/blog/homeInfo/load/1',
        method: 'post'
      }).then(async (res) => {
        // console.log(res.data)
      })
    },
    getProjects: function () {
      var query = {
        size: 6,
        page: this.curPage
      }
      axios({
        url: '/api/blog/projectInfo/pageList',
        method: 'post',
        data: query
      }).then(async (res) => {
        // console.log(res.data)
        this.projects = res.data.data
        this.total = (res.data.count / 6) + 1
      })
    }
  }
}
</script>
